<template>
  <!-- 羊奶粉营养标签结果及比较 - 营养标签结果 - 纯羊奶粉 -->
  <div>
    <b-card class="container-fluid">
      <v-chart class="chart" :option="option" autoresize/>
    </b-card>
  </div>
</template>

<style scoped>
.chart {
  height: 80vh;
}
</style>

<script>
import { THEME_KEY } from 'vue-echarts'

export default {
  name: 'view-7',
  provide: {
    [THEME_KEY]: 'dark'
  },
  data() {
    return {
      option: {
        title: {
          text: '蛋白质',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: [1, 2, 3, 4, 5, 6, 8, 9, 10, 11, 13, 14, 16, 19, 23, 24, 25, 26, 27, 28, 29, 30, 32, 33, 34, 35, 36, 37, 38]
        },
        yAxis: {},
        series: [
          {
            name: '测定值',
            type: 'bar',
            data: [25.4, 25.1, 24.5, 25.1, 25.3, 25.4, 25.3, 24.8, 23.6, 25.8, 23.6, 25.5, 25.4, 25.4, 24.8, 25.6, 24.9, 25, 25.1, 26.2, 24.6, 24.9, 26.3, 25.6, 25.6, 27.4, 24.6, 23.4, 24.9]
          },
          {
            name: '标签值',
            type: 'bar',
            data: [25, 24, 24, 24.5, 25, 24, 24, 25, 25, 24, 23, 24.5, 24.5, 25, 24, 24.9, 24, 24.5, 24, 25, 24, 24, 24, 27, 27.1, 26, 25, 25, 25.8]
          }
        ],
        legend: {
          show: true,
          orient: 'vertical',
          left: 'left',
          top: 'top'
        }
      }
    }
  },
  methods: {

  }
}
</script>
